<template>
  <view>
    <u-navbar title="修改地址" :placeholder="true" :autoBack="true"></u-navbar>
    <cityPicker
      :column="column"
      :default-value="defaultValue"
      :mask-close-able="maskCloseAble"
      @confirm="confirm"
      @cancel="cancel"
      :visible="visible"
    />
    <u--form
      labelPosition="left"
      :model="model1"
      :rules="rules"
      ref="form1"
      class="form"
    >
      <u-form-item
        labelWidth="140rpx"
        label="联系人"
        prop="userInfo.name"
        borderBottom
        ref="item"
        class="item"
      >
        <u--input
          v-model="model1.userInfo.name"
          border="none"
          placeholder="收货人姓名"
        ></u--input>
      </u-form-item>
      <u-form-item
        labelWidth="140rpx"
        label="手机号"
        prop="userInfo.phone"
        borderBottom
        ref="item2"
        class="item"
      >
        <u--input
          v-model="model1.userInfo.phone"
          border="none"
          placeholder="收货人手机号"
          type="number"
        ></u--input>
      </u-form-item>
      <u-form-item
        labelWidth="140rpx"
        label="选择地址"
        prop="userInfo.address"
        borderBottom
        ref="item3"
        class="item"
        @click="open"
      >
        <view @click="open">
          <u-input
            v-model="model1.userInfo.city"
            border="none"
            placeholder="收货人地址"
            :disabled="true"
            disabledColor="#fff"
            @click="open"
          ></u-input>
        </view>
      </u-form-item>
      <u-form-item
        labelWidth="140rpx"
        label="详细地址"
        prop="userInfo.address"
        borderBottom
        ref="item3"
        class="item"
      >
        <u--input
          v-model="model1.userInfo.address"
          border="none"
          placeholder="请输入详细地址"
        ></u--input>
      </u-form-item>
    </u--form>
    <view class="acquiesce">
      <view class="left">设为默认</view>
      <view class="right"
        ><u-switch
          v-model="acquiesce"
          asyncChange
          @change="asyncChange"
        ></u-switch
      ></view>
    </view>
    <view class="submit" @click="submit">提交</view>
  </view>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
const store = useStore();
//省市区选择器js
import cityPicker from "@/compents/piaoyi-citypicker/piaoyi-cityPicker";

const id = ref("");
const visible = ref(false);
const maskCloseAble = ref(true);
const str = ref("");
const defaultValue = ref("110101");
const column = ref(3);
const model1 = ref({
  userInfo: {
    name: "",
    phone: "",
    city: "",
    address: "",
    status: "1",
  },
});
const open = () => {
  visible.value = true;
};
const confirm = (val) => {
  // console.log(val);
  model1.value.userInfo.city = val.name;
  str.value = JSON.stringify(val);
  visible.value = false;
};
const cancel = () => {
  visible.value = false;
};
//form表单选择器
const acquiesce = ref(false);
const asyncChange = (e) => {
  uni.showModal({
    content: e ? "确定要打开吗" : "确定要关闭吗",
    success: (res) => {
      if (res.confirm) {
        acquiesce.value = e;
      }
    },
  });
};
//form规则
const rules = reactive({
  "userInfo.name": {
    type: "string",
    required: true,
    message: "请填写姓名",
    trigger: ["blur", "change"],
  },
  "userInfo.phone": {
    type: "number",
    len: 11,
    required: true,
    message: "请填写正确手机号",
    trigger: ["blur", "change"],
  },
  "userInfo.address": {
    type: "string",
    required: true,
    message: "请填写地址",
    trigger: ["blur"],
  },
  "userInfo.address": {
    type: "string",
    required: true,
    message: "请填写详细地址",
    trigger: ["blur", "change"],
  },
});
const submit = async () => {
  if (
    model1.value.userInfo.name &&
    model1.value.userInfo.phone &&
    model1.value.userInfo.city &&
    model1.value.userInfo.address
  ) {
    // console.log(model1.value.userInfo);
    await store.dispatch("addresschange", {
      id: id.value,
      name: model1.value.userInfo.name,
      phone: model1.value.userInfo.phone,
      city: model1.value.userInfo.city,
      address: model1.value.userInfo.address,
      status: "0",
    });

    uni.showToast({
      title: "提交成功",
      icon: "success",
    });
    uni.navigateBack();
  } else {
    uni.showToast({
      title: "提交失败，请重新检查后提交",
      icon: "error",
    });
  }
};
onLoad((options) => {
  store.dispatch("addresschange_id", options.id);
  id.value = options.id;
  model1.value.userInfo = store.state.addresschange;
});

//
</script>

<style lang="scss">
.form {
  background-color: #fff;
  margin: 20rpx 0;

  .item {
    border-bottom: 1px solid #eee;
    padding: 10rpx 20rpx;
  }
}
.acquiesce {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 30rpx 20rpx;
  font-size: 15px;
}
.submit {
  background-color: #f9436a;
  width: calc(100% - 40rpx);
  height: 80rpx;
  line-height: 80rpx;
  color: #fff;
  text-align: center;
  border-radius: 10rpx;
  margin: auto;
  margin-top: 60rpx;
}
</style>
